<template>
  <div class="detail-rate">
    <div class="detail-title">
      <span>用户评价</span>
      <span><a href="#">更多</a></span>
    </div>
    <!-- 用户头像和名字 -->
    <div class="rate-user" v-if="rateItems.user">
      <img :src="rateItems.user.avatar" alt="">
      {{rateItems.user.uname}}
    </div>
    <!-- 用户评论 -->
    <div class="rate-bottom">
      <!-- 评论 -->
      <div class="rate-content">
        {{rateItems.content}}
      </div>
      <div class="rate-time">
        <span class="date">{{rateItems.created | dateFormate}}</span>
        <span>{{ rateItems.style }}</span>
      </div>
    </div>
    <div class="rate-image" v-if="rateItems.images">
      <img v-for="(item, index) in rateItems.images" :src="item" :key="index">
    </div>
    
  </div>
</template>

<script>
  export default {
    props: {
      rateItems: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    filters: {
      dateFormate(date) {
        var time = new Date(parseInt(date) * 1000).toLocaleString();
        var reg =  new RegExp("(/)", "g");
        var reg_time =  new RegExp("(上午|下午)", "g");
        return time.replace(reg,'-').replace(reg_time,'');
      }
    }
  }
</script>

<style scoped>
  .detail-rate {
    padding-right: 10px;
    margin: 20px 10px;
    font-size: 14px;
  }
  .detail-title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .rate-user img {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .rate-content {
    margin-top: 5px;
    line-height: 18px;
    font-size: 13px;
  }
  .rate-time {
    margin: 10px 0px;
    color: #aaa;
  }
  .date {
    margin-right: 8px;
  }
  .rate-image img {
    width: 50px;
    height: 50px;
    margin-right: 5px;
  }
</style>